<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<!--  v-model="dataList" @query="queryList" -->
		<pageTxt>
			<z-paging ref="paging" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<view class="navbar-box">
						<u-navbar :title="formInlineReceipt.voucher_id ? '编辑收款单' : '添加收款单'" :autoBack="true" :fixed="false"></u-navbar>
					</view>
				</template>
				<view class="add-content ios">
					<u--form labelPosition="top" :model="formInlineReceipt" ref="uForm" labelWidth="auto">
						<view class="form-box">
							<u-form-item labelPosition="top" labelWidth="100%" required label="收款类型" borderBottom @click="cascaderFunc('payTypeShow')">
								<u--input
									placeholder="选择收款类型"
									inputAlign="left"
									v-model="formInlineReceipt.payment_type_name"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="项目名称" borderBottom @click="cascaderFunc('projectShow')" v-if="formInlineReceipt.payment_type">
								<u--input
									placeholder="选择项目"
									inputAlign="left"
									v-model="formInlineReceipt.project_name"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
								<template v-if="formInlineReceipt.payment_type == 4 && formInlineReceipt.settlementMsg">
									<div style="margin-top: 20rpx">
										<text style="color: #606266">结算单：{{ formInlineReceipt.settlementMsg.settlement_number }}</text>
										<text style="padding: 0 0 0 10px; color: #3b75ff" @click.stop="goSettlementMsFunc">查看详情</text>
									</div>
								</template>
							</u-form-item>
							<template v-if="formInlineReceipt.project_id">
								<u-form-item labelPosition="top" labelWidth="100%" required label="项目已收款" borderBottom>
									<u--input
										placeholder="项目已收款"
										inputAlign="left"
										v-model="formInlineReceipt.paid_amount"
										border="none"
										color="#c8c9cc"
										fontSize="28rpx"
										disabled
										disabledColor="#ffffff"
										suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
										placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
									></u--input>
								</u-form-item>
								<u-form-item labelPosition="top" labelWidth="100%" required label="项目未收款" borderBottom>
									<u--input
										placeholder="项目未收款"
										inputAlign="left"
										v-model="formInlineReceipt.unpaid_amount"
										border="none"
										color="#c8c9cc"
										fontSize="28rpx"
										disabled
										disabledColor="#ffffff"
										suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
										placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
									></u--input>
								</u-form-item>
							</template>
							<u-form-item labelPosition="top" labelWidth="100%" required label="增项款" borderBottom v-if="formInlineReceipt.payment_type == 5" @click="cascaderFunc('changeShow')">
								<u--input
									placeholder="选择增项款"
									inputAlign="left"
									v-model="formInlineReceipt.change_name"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="收款金额" borderBottom>
								<u--input
									@input="inputFunc"
									type="number"
									placeholder="收款金额"
									inputAlign="left"
									v-model="formInlineReceipt.amount_collected"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabledColor="#ffffff"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="收款账户" borderBottom @click="cascaderFunc('companyShow')">
								<u--input
									placeholder="收款账户"
									inputAlign="left"
									v-model="formInlineReceipt.receiving_account_name"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" label="备注" borderBottom>
								<u--textarea
									disableDefaultPadding
									v-model="formInlineReceipt.order_demand"
									border="none"
									placeholder="备注"
									:placeholderStyle="{ fontSize: '13.5px', color: '#BFC4CC' }"
								></u--textarea>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="支付凭证">
								<file-upload :filesList="formInlineReceipt.payment_voucherOld" :count="1" :type="1" @afterRead="afterRead" @delete="deletePic"></file-upload>
							</u-form-item>
						</view>
					</u--form>
				</view>
				<view class="footer ios">
					<u-button
						@click="submitFunc"
						text="提交"
						customStyle="width: 702rpx;height: 88rpx;background: #3B75FF;border-radius: 16rpx;font-weight: 500;font-size: 28rpx;color: #FFFFFF;margin:20rpx 24rpx;"
					></u-button>
				</view>
			</z-paging>
		</pageTxt>
		<!-- 收款单类型 -->
		<u-picker
			ref="payTypeShow"
			title="收款单类型"
			closeOnClickOverlay
			:show="payTypeShow"
			:columns="[payTypeList]"
			@confirm="confirmFunc($event, 'payTypeShow')"
			@cancel="closeFunc('payTypeShow')"
			@close="closeFunc('payTypeShow')"
			keyName="label"
		></u-picker>
		<!-- 项目列表 -->
		<u-picker
			ref="projectShow"
			title="项目列表"
			closeOnClickOverlay
			:show="projectShow"
			:columns="[projectList]"
			@confirm="confirmFunc($event, 'projectShow')"
			@cancel="closeFunc('projectShow')"
			@close="closeFunc('projectShow')"
			keyName="project_name"
		></u-picker>
		<!-- 增减项列表 -->
		<u-picker
			ref="changeShow"
			title="增减项列表"
			closeOnClickOverlay
			:show="changeShow"
			:columns="[changeList]"
			@confirm="confirmFunc($event, 'changeShow')"
			@cancel="closeFunc('changeShow')"
			@close="closeFunc('changeShow')"
			keyName="change_number"
		></u-picker>
		<!-- 收款账户列表 -->
		<u-picker
			ref="companyShow"
			title="收款账户列表"
			closeOnClickOverlay
			:show="companyShow"
			:columns="[companyList]"
			@confirm="confirmFunc($event, 'companyShow')"
			@cancel="closeFunc('companyShow')"
			@close="closeFunc('companyShow')"
			keyName="account_name"
		></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			textareaPadding: 0,
			cascaderShow: false,
			loading: false,
			dataList: [],
			formInlineReceipt: {
				project_name: '',
				project_id: '',
				payment_type: '',
				payment_type_name: '',
				amount_collected: '',
				remark: '',
				receiving_account_id: '',
				receiving_account_name: '',
				payment_voucher: [],
				payment_voucherOld: [],
				change_id: '',
				change_name: '',
				settlementMsg: '',
				unpaid_amount: '',
				paid_amount: ''
			},
			payTypeShow: false, //收款单弹出
			//收款单类型
			payTypeList: [
				{
					id: 1,
					label: '勘场费用'
					// status_arr: [1020],
				},
				{
					id: 2,
					label: '预付款'
					// status_arr: [1105],
				},
				{
					id: 3,
					label: '进度款'
					// progress_payment: 1
				},
				{
					id: 4,
					label: '尾款'
				},
				{
					id: 5,
					label: '增项款'
					// additional_payment: 1
				},
				{
					id: 6,
					label: '定金',
					less_status: 1105
				}
			],
			projectList: [], //项目列表
			projectShow: false, //项目列表弹窗
			changeList: [], //增项款
			changeShow: false, //增项款弹窗
			companyList: [], //收款账户列表
			companyShow: false //收款账户弹窗
		};
	},
	async onLoad(option) {
		// 带id重新提交
		if (option.id) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('sendData', async (data) => {
				let res = await this.$Apipc.getCompanyList({
					page: 1,
					num: 999,
					account_type: 1
				});
				console.log(res, '收款账户');
				if (res.code == 200) {
					this.companyList = res.data.list;
					if (data) {
						this.editDataFunc(data);
					}
				}
			});
		} else {
			let res = await this.$Apipc.getCompanyList({
				page: 1,
				num: 999,
				account_type: 1
			});
			console.log(res, '收款账户');
			if (res.code == 200) {
				this.companyList = res.data.list;
			}
		}
		// 代办来的
		if (option.project_id) {
			this.formInlineReceipt.payment_type = this.payTypeList[option.pay_type_idx].id;
			this.formInlineReceipt.payment_type_name = this.payTypeList[option.pay_type_idx].label;
			let res = await this.selectProjectList(this.payTypeList[option.pay_type_idx]);
			let item = res.find((item) => item.id == option.project_id);
			this.formInlineReceipt.project_name = item.project_name;
			this.formInlineReceipt.project_id = item.id;
			this.projectShowChange(item);
		}
	},
	methods: {
		inputFunc(e) {
			this.$nextTick(() => {
				this.formInlineReceipt.amount_collected = this.$inputFunc(e);
			});
		},
		afterRead(event) {
			event.map((item) => {
				this.formInlineReceipt.payment_voucher.push(item);
			});
		},
		deletePic(event) {
			console.log(event);
			// 本地文件
			if (!event.file.file_id) {
				let index1 = this.formInlineReceipt.payment_voucher.findIndex((item) => {
					return item.url == event.file.url;
				});
				this.formInlineReceipt.payment_voucher.splice(index1, 1);
			} else {
				// 线上文件
				let index2 = this.formInlineReceipt.payment_voucherOld.findIndex((item) => {
					return item.url == event.file.url;
				});
				this.formInlineReceipt.payment_voucherOld.splice(index2, 1);
				this.formInlineReceipt.delete_arr.push(event.file);
			}
		},
		// picker 弹窗打开
		cascaderFunc(type) {
			switch (type) {
				case 'payTypeShow':
					let payTypeIndex = this.payTypeList.findIndex((item) => {
						return item.id == this.formInlineReceipt.payment_type;
					});
					this.$refs.payTypeShow.setIndexs([payTypeIndex == -1 ? 0 : payTypeIndex], true);
					this.payTypeShow = true;
					break;
				case 'projectShow':
					let projectIndex = this.projectList.findIndex((item) => {
						return item.id == this.formInlineReceipt.project_id;
					});
					this.$refs.projectShow.setIndexs([projectIndex == -1 ? 0 : projectIndex], true);
					this.projectShow = true;
					break;
				case 'changeShow':
					if (!this.changeList.length) {
						uni.showToast({
							title: '该项目无增项款',
							icon: 'error'
						});
						return;
					}
					let changeIndex = this.changeList.findIndex((item) => {
						return item.id == this.formInlineReceipt.change_id;
					});
					this.$refs.changeShow.setIndexs([changeIndex == -1 ? 0 : changeIndex], true);
					this.changeShow = true;
					break;
				case 'companyShow':
					let companyIndex = this.companyList.findIndex((item) => {
						return item.id == this.formInlineReceipt.receiving_account_id;
					});
					this.$refs.companyShow.setIndexs([companyIndex == -1 ? 0 : companyIndex], true);
					this.companyShow = true;
					break;

				default:
			}
		},
		// picker 弹窗关闭
		closeFunc(type) {
			switch (type) {
				case 'payTypeShow':
					this.payTypeShow = false;
					break;
				case 'projectShow':
					this.projectShow = false;
					break;
				case 'changeShow':
					this.changeShow = false;
					break;
				case 'companyShow':
					this.companyShow = false;
					break;
				default:
			}
		},
		// picker 弹窗选择
		confirmFunc(e, type) {
			console.log(e);
			switch (type) {
				case 'payTypeShow':
					this.formInlineReceipt.payment_type = e.value[0].id;
					this.formInlineReceipt.payment_type_name = e.value[0].label;
					this.formInlineReceipt.project_name = '';
					this.formInlineReceipt.project_id = '';
					this.receiving_account_id = '';
					this.receiving_account_name = '';
					this.change_id = '';
					this.change_name = '';
					this.settlementMsg = '';
					this.unpaid_amount = '';
					this.paid_amount = '';
					this.payTypeShow = false;
					this.selectProjectList(e.value[0]);
					break;
				case 'projectShow':
					this.formInlineReceipt.project_name = e.value[0].project_name;
					this.formInlineReceipt.project_id = e.value[0].id;
					//
					let index = this.projectList.findIndex((item) => {
						return item.id == e.value[0].id;
					});
					if (index == -1) {
						this.formInlineReceipt.settlementMsg = '';
						this.formInlineReceipt.receiving_account_id = '';
						this.formInlineReceipt.change_id = '';
						this.changeList = [];
						return;
					}
					this.projectShowChange(e.value[0]);
					break;
				case 'changeShow':
					this.formInlineReceipt.change_name = e.value[0].change_number;
					this.formInlineReceipt.change_id = e.value[0].id;
					this.changeShow = false;
					break;
				case 'companyShow':
					this.formInlineReceipt.receiving_account_name = e.value[0].account_name;
					this.formInlineReceipt.receiving_account_id = e.value[0].id;
					this.companyShow = false;
					break;
				default:
			}
		},
		projectShowChange(item) {
			let item2 = this.companyList.find((row) => row.id == item.receiving_account_id);
			this.formInlineReceipt.receiving_account_id = item2.id;
			this.formInlineReceipt.receiving_account_name = item2.account_name;

			this.formInlineReceipt.change_id = '';
			if (this.formInlineReceipt.payment_type == 4) {
				// 尾款获取结算单列表
				this.getSettlementList(item.project_name);
			}
			if (this.formInlineReceipt.payment_type == 5) {
				// 增项款获取增减项列表
				this.getchangeList(item.project_name); //增项列表
			}
			// 获取项目已收未收
			uni.showLoading({
				mask: true
			});
			this.$Apipc
				.selectProjectDetails({
					project_id: item.id
				})
				.then((res) => {
					console.log(res, '项目详情');
					uni.hideLoading();
					if (res.code == 200) {
						this.formInlineReceipt.unpaid_amount = res.data.unpaid_amount || '0'; //未收
						this.formInlineReceipt.paid_amount = res.data.paid_amount || '0'; //已收
					}
				});
			this.projectShow = false;
		},
		// 获取项目列表
		selectProjectList(obj, projectData) {
			this.projectList = [];
			uni.showLoading({
				mask: true
			});
			return new Promise((resolve, reject) => {
				this.$Apipc.selectProjectList(obj).then((res) => {
					console.log(res, '项目列表', projectData);
					uni.hideLoading();
					if (res.code == 200) {
						// 修改收款单时候才会用到
						if (projectData) {
							let index = res.data.findIndex((item) => {
								return item.id == projectData.project_id;
							});
							if (index == -1) {
								res.data.push({
									id: projectData.project_id,
									project_name: projectData.project_name
								});
							}
						}
						this.projectList = res.data;
						resolve(res.data);
					}
				});
			});
		},
		// 结算列表
		getSettlementList(project_name) {
			this.$Apipc
				.getSettlementList({
					page: 1,
					num: 10,
					project_name
				})
				.then((res) => {
					console.log(res, '结算列表');
					if (res.code == 200) {
						this.formInlineReceipt.settlementMsg = res.data.list[0];
					}
				});
		},
		// 增项列表
		getchangeList(project_name) {
			this.$Apipc
				.getChangeList({
					page: 1,
					num: 999,
					increase_or_decrease: 1,
					project_name: project_name || ''
				})
				.then((res) => {
					console.log(res, '增项列表');
					if (res.code == 200) {
						this.changeList = res.data.list;
						// 编辑时数据处理
						if (this.formInlineReceipt.change_id) {
							let index = res.data.list.findIndex((item) => {
								return item.id == this.formInlineReceipt.change_id;
							});
							this.formInlineReceipt.change_name = res.data.list[index].change_number;
						}
					}
				});
		},
		// 提交字段判空
		isNullFunc() {
			let formInlineReceipt = this.formInlineReceipt;
			if (!formInlineReceipt.payment_type) {
				uni.showToast({
					title: '请选择收款类型',
					icon: 'error'
				});
				return false;
			}
			if (!formInlineReceipt.project_name) {
				uni.showToast({
					title: '请选择项目',
					icon: 'error'
				});
				return false;
			}
			if (formInlineReceipt.payment_type == 5 && !formInlineReceipt.change_name) {
				uni.showToast({
					title: '请选择增项款',
					icon: 'error'
				});
				return false;
			}
			if (!formInlineReceipt.amount_collected) {
				uni.showToast({
					title: '请输入收款金额',
					icon: 'error'
				});
				return false;
			}
			if (!formInlineReceipt.receiving_account_name) {
				uni.showToast({
					title: '请选择收款账户',
					icon: 'error'
				});
				return false;
			}
			if (!formInlineReceipt.payment_voucher.length && !formInlineReceipt.payment_voucherOld.length) {
				uni.showToast({
					title: '请选择支付凭证',
					icon: 'error'
				});
				return false;
			}
			return true;
		},
		// 提交
		submitFunc() {
			let formInlineReceipt = this.formInlineReceipt;
			if (!this.isNullFunc()) return;
			let data = {
				amount_collected: formInlineReceipt.amount_collected,
				payment_type: formInlineReceipt.payment_type,
				payment_name: formInlineReceipt.payment_type_name,
				project_id: formInlineReceipt.project_id,
				project_name: formInlineReceipt.project_name,
				receiving_account_id: formInlineReceipt.receiving_account_id,
				account_name: formInlineReceipt.receiving_account_name,
				remark: formInlineReceipt.remark,
				change_id: formInlineReceipt.change_id,
				change_number: formInlineReceipt.change_name,
				delete_arr: formInlineReceipt.delete_arr
			};
			// 编辑
			if (formInlineReceipt.voucher_id) {
				data.voucher_id = formInlineReceipt.voucher_id;
				// 有文件
				if (formInlineReceipt.payment_voucher.length) {
					uni.showLoading({
						mask: true,
						title: '凭证上传中'
					});
					this.$upload(formInlineReceipt.payment_voucher).then((res) => {
						uni.hideLoading();
						console.log(res, '上传');
						data.payment_voucher = res.arrResult;
						this.updReceipt(data);
					});
					return;
				}
				// 无文件
				data.payment_voucherOld = formInlineReceipt.payment_voucherOld; //文件不变
				this.updReceipt(data);
				return;
			}
			// 添加
			uni.showLoading({
				mask: true,
				title: '凭证上传中'
			});
			this.$upload(formInlineReceipt.payment_voucher).then((res) => {
				uni.hideLoading();
				console.log(res, '上传');
				data.payment_voucher = res.arrResult;
				this.addReceipt(data);
			});
		},
		// 添加收款单
		addReceipt(data) {
			uni.showLoading({
				mask: true
			});
			this.$Apipc.addReceipt(data).then((res) => {
				console.log(res, '添加收款单');
				uni.hideLoading();
				if (res.code == 200) {
					var pages = getCurrentPages();
					var perPage = pages[pages.length - 2];
					if (perPage && perPage.route == 'pagesA/financialManagement/financialManagement') {
						perPage.$vm.$refs.collectionManagement.searchFunc();
					}

					setTimeout(() => {
						if (perPage) {
							uni.navigateBack({
								delta: 1
							});
						} else {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}
					}, 500);
				}
				uni.showToast({
					icon: res.code == 200 ? 'success' : 'error',
					title: res.message
				});
			});
		},
		goSettlementMsFunc() {
			uni.navigateTo({
				url: '/pagesB/settlementManagementDetail/settlementManagementDetail?id=' + this.formInlineReceipt.project_id
			});
		},
		// 修改收款单
		updReceipt(obj) {
			console.log(obj);
			uni.showLoading({
				mask: true
			});
			this.$Apipc.updReceipt(obj).then((res) => {
				console.log(res, '修改收款单');
				uni.hideLoading();
				if (res.code == 200) {
					setTimeout(() => {
						var currentPages = getCurrentPages()[getCurrentPages().length - 2]
						if (currentPages) {
							uni.navigateBack({
								delta: 1
							});
						} else {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}
					}, 500);
				}
				uni.showToast({
					icon: res.code == 200 ? 'success' : 'error',
					title: res.message
				});
			});
		},
		// 重新提交数据显示处理
		editDataFunc(data) {
			let companyList = this.companyList; //收款账户列表
			let companyIndex = companyList.findIndex((item) => {
				return data.receiving_account_id == item.id;
			});
			let payTypeList = this.payTypeList; //收款类型
			let payTypeIndex = payTypeList.findIndex((item) => {
				return data.payment_type == item.id;
			});
			this.selectProjectList(payTypeList[payTypeIndex]);
			this.formInlineReceipt = {
				delete_arr: [], //被删除凭证
				voucher_id: data.voucher_id,
				project_name: data.project_name,
				project_id: data.project_id,
				payment_type: data.payment_type,
				payment_type_name: payTypeList[payTypeIndex].label,
				amount_collected: data.amount_collected,
				remark: data.remark,
				receiving_account_id: data.receiving_account_id,
				receiving_account_name: companyIndex != -1 ? companyList[companyIndex].account_name : '',
				payment_voucher: [],
				payment_voucherOld: data.voucher_file,
				change_id: data.change_id || '',
				change_name: '',
				settlementMsg: '',
				unpaid_amount: '',
				paid_amount: ''
			};
			uni.showLoading({
				mask: true
			});
			this.$Apipc
				.selectProjectDetails({
					project_id: data.project_id
				})
				.then((res) => {
					console.log(res, '项目详情');
					uni.hideLoading();
					if (res.code == 200) {
						this.formInlineReceipt.unpaid_amount = res.data.unpaid_amount || '0'; //未收
						this.formInlineReceipt.paid_amount = res.data.paid_amount || '0'; //已收
					}
				});
			if (this.formInlineReceipt.payment_type == 4) {
				// 尾款获取结算单列表
				this.getSettlementList(data.project_name);
			}
			if (this.formInlineReceipt.payment_type == 5) {
				// 增项款获取增减项列表
				this.getchangeList(data.project_name); //增项列表
			}
		}
	}
};
</script>

<style lang="scss" scoped></style>
